<template>
  <div class="filePreview-page">
    <div>
      <h1>内容获取区</h1>

      <div class="custom-btn">
        <el-upload ref="customUpload" v-model:file-list="fileList" :limit="1" :auto-upload="false" class="upload-demo"
          action="#" :on-change="handleChange">
          <el-button type="primary">上传文件</el-button>
        </el-upload>
      </div>

      <div class="custom-link">
        <el-input v-model="fileName" placeholder="请输入文件名" />
        <el-input v-model="fileParams" placeholder="请输入文件链接" />
        <el-button type="primary" @click="openFileClick">打开文件</el-button>
      </div>
    </div>
    <div>
      <h1>内容展示区</h1>
      <div class="file-zs">
        <FilePreview v-if="fileVisible" @close="fileVisible = false" :fileVisible="fileVisible" :fileName="fileName"
          :fileParams="fileParams" />
      </div>
    </div>
  </div>
</template>

<script setup>
import FilePreview from '@/components/fileComponents/filePreview.vue';
import { nextTick } from 'vue';

// 公共方法引入
const { proxy } = getCurrentInstance();

const fileVisible = ref(false);
const fileName = ref('');
const fileParams = ref('');
const fileList = ref([]);
const customUpload = ref(null);


// 上传文件
const handleChange = (UploadFile, UploadFiles) => {

  fileVisible.value = false;
  nextTick(() => {
    fileVisible.value = true;
    fileName.value = UploadFile.name;
    fileParams.value = UploadFile.raw;
    // 清空文件
    fileList.value = [];
  })
}

// 打开文件
const openFileClick = () => {


  if (!fileName.value) {
    proxy.$warningMes('请输入文件名');
    return;
  }
  if (!fileParams.value) {
    proxy.$warningMes('请输入文件路径');
    return;
  }


  fileVisible.value = false;
  nextTick(() => {
    fileVisible.value = true;
  })
}

</script>

<style lang="scss" scoped>
.filePreview-page {
  width: 100%;
  height: 100%;
  display: flex;

  >div {
    h1 {
      margin-bottom: 20px;
    }

    .custom-link {
      margin-top: 50px;

      >div {
        margin-bottom: 20px;
      }
    }
  }

  >div:first-child {
    width: 20%;
    height: 100%;
    margin-right: 20px;
  }

  >div:last-child {
    width: calc(80% - 20px);
    height: 100%;

    .file-zs {
      width: 100%;
      height: calc(100% - 70px);
    }
  }
}
</style>